<template>
  <el-form-item label="商品分类" prop="type" :rules="rules" v-if="!readonly">
    <el-radio-group v-model="modelValue">
      <!--    TODO raedonly false 没有用到的地方 -->
      <el-radio v-for="item in productTypes" :label="item.value">{{item.label}}</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="商品分类" prop="type" v-else>
    {{getProductType(modelValue)}}
  </el-form-item>
</template>

<script lang="ts" setup>
import {useGetGoodsType} from "@/components/goodsCenter/compositions/useGetGoodsType"

const props = withDefaults(defineProps<{
  modelValue: string,
  readonly: boolean
}>(), {
  modelValue: '',
  readonly: false
})

const emits = defineEmits(['update:model-value'])
const modelValue = computed({
  set(newValue) {
    emits("update:model-value", newValue)
  },
  get() {
    return props.modelValue
  }
})

const rules = [{message: '请选择商品分类', required: true, trigger: 'change'}]

const {getProductType, productTypes} = useGetGoodsType()

// const typeName = ref('')
// watch(modelValue, () => {
//   typeName.value = getProductType(props.modelValue)
// })

</script>

<style scoped lang="scss">

</style>
